<template>
  <div class="app-container" v-loading="loading">
    <!--  基本信息  -->
    <el-descriptions title="订单信息" :column="2" border>
      <el-descriptions-item label="订单编号" label-class-name="d-label" content-class-name="d-content">{{form.mallOrder.orderNo}}</el-descriptions-item>
      <el-descriptions-item label="下单时间" label-class-name="d-label" content-class-name="d-content">{{form.mallOrder.createTime}}</el-descriptions-item>
      <el-descriptions-item label="实付金额" label-class-name="d-label" content-class-name="d-content">{{form.mallOrder.orderInfo.payAmount}}</el-descriptions-item>
      <el-descriptions-item label="状态" label-class-name="d-label" content-class-name="d-content">
        <el-tag size="small">{{form.mallOrder.statusName}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="付款时间" label-class-name="d-label" content-class-name="d-content">{{form.mallOrder.orderInfo.payTime}}</el-descriptions-item>
      <el-descriptions-item label="真实姓名" label-class-name="d-label" content-class-name="d-content">{{form.mallOrder.realName}}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>

    <!--  商品信息  -->
    <el-descriptions :column="2" border title="商品信息">
      <el-descriptions-item label="商品编号" label-class-name="d-label" content-class-name="d-content">{{form.goodsNumber}}</el-descriptions-item>
      <el-descriptions-item label="商品名称" label-class-name="d-label" content-class-name="d-content">{{form.goodsName}}</el-descriptions-item>
      <el-descriptions-item label="价格" label-class-name="d-label" content-class-name="d-content">{{form.price}}</el-descriptions-item>
      <el-descriptions-item label="数量" label-class-name="d-label" content-class-name="d-content">{{form.num}}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>

    <!--  退款信息  -->
    <el-descriptions title="退款信息" :column="2" border>
      <el-descriptions-item label="退款金额" label-class-name="d-label" content-class-name="d-content">{{form.price}}</el-descriptions-item>
      <el-descriptions-item label="申请时间" label-class-name="d-label" content-class-name="d-content">{{form.orderRefund.createTime}}</el-descriptions-item>
      <el-descriptions-item label="退款原因" label-class-name="d-label" span="2">{{form.refundCause}}</el-descriptions-item>
      <el-descriptions-item label="拒绝原因" label-class-name="d-label" span="2">
        <el-input v-model="form.refundAudit" placeholder="请输入拒绝原因" size="mini" :disabled="form.refundStatus != '1'"/>
      </el-descriptions-item>
      <el-descriptions-item label="退款方式" label-class-name="d-label" content-class-name="d-content">{{payTypeFormat(form.mallOrder.orderInfo)}}</el-descriptions-item>
      <el-descriptions-item label="退款状态" label-class-name="d-label" content-class-name="d-content">
        <el-tag size="small">{{statusFormat(form)}}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>

    <div v-if="form.refundStatus == '1'">
      <el-button type="primary" @click="submitForm(3)">审核通过</el-button>
      <el-button type="danger" @click="submitForm(2)">拒绝</el-button>
    </div>
  </div>
</template>

<script>

import { getRefund,checkRefund } from "@/api/mall/refund";

export default {
  data() {
    return {
      appendToBody: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: false,
      // 总条数
      total: 0,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 提交控制
      disabled: true,
      // 表单参数
      form: {
        id: undefined,
        orderId: undefined,
        price: undefined,
        num: undefined,
        goodsId: undefined,
        refundAudit: undefined,
        mallOrder: {
          orderInfo: {
          }
        },
        orderRefund: {}
      },
      payTypeOptions: [{
        dictValue: "0",
        dictLabel: "余额"
      },{
        dictValue: "1",
        dictLabel: "微信"
      },{
        dictValue: "2",
        dictLabel: "支付宝"
      }],
      statusOptions: [{
        dictValue: "0",
        dictLabel: "取消"
      },{
        dictValue: "1",
        dictLabel: "申请中"
      },{
        dictValue: "2",
        dictLabel: "退款失败"
      },{
        dictValue: "3",
        dictLabel: "退款成功"
      }],
      routerOptions: [],
      // 表单校验
      rules: {
      },

    };
  },
  created() {
    this.getList();
    this.getDicts("sys_router").then(response => {
      this.routerOptions = response.data;
    });
  },
  methods: {
    getList() {
      this.loading = true;

      this.form.id = this.$route.query.id;
      if (this.form.id != "" && this.form.id != undefined && this.form.id != null) {
        getRefund(this.form.id).then(res => {
          this.form = res.data;
        })
      }
      this.loading = false;
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.refundStatus);
    },
    payTypeFormat(row, colum) {
      return this.selectDictLabel(this.payTypeOptions, row.payType);
    },
    // 页面路由字典翻译
    routerFormat(row, column) {
      return this.selectDictLabel(this.routerOptions, row);
    },
    /** 提交按钮 */
    submitForm: function (e) {
      var params = {
        id: this.form.id,
        refundStatus: e
      }
      if (params.refundStatus == 2) {
        if (this.form.refundAudit == undefined || this.form.refundAudit == '' || this.form.refundAudit == null) {
          this.$message.warning('拒绝原因不能为空！')
          return;
        } else {
          params.refundAudit = this.form.refundAudit;
        }
      }

      checkRefund(params).then(response => {
        if (response.code === 200) {
          this.msgSuccess(response.msg);
          this.$store.dispatch("tagsView/delView", this.$route);
          var location = this.routerFormat("RefundOrder");
          // var location = '/mall/order/refund';
          this.$router.push({'path': location, name: 'RefundOrder', 'query': {}})
        }
      })
    },

  }

}
</script>

<style scoped>
.d-label {
  width: 100px;
}

.express {
  display: flex;
  align-items: center;
}
</style>
